﻿<template>
    <div>
        <div class="layout-main">
            <el-form ref="queryParams" inline label-position="right" label-width="180px" v-model="queryParams">
                <el-form-item label="客户选择" prop="toPartnerId" :rules="[{required:true,message:'备注客户选择不能为空', trigger: 'blur'}]">
                    <el-select size="small" filterable v-model="queryParams.toPartnerId" placeholder="客户选择" style="width: 240px">
                        <el-option v-for="partner in disPartners" :value="partner.id" :key="partner.id" :label="partner.name">
                            {{partner.name}}
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-date-picker size="small" type="daterange" @change="cbtime" v-model="others.createtime" value-format="yyyy-MM-dd" placeholder="创建时间" style="width: 240px"></el-date-picker>
                </el-form-item>
                <el-form-item label="sku编码">
                    <el-input size="small" v-model="queryParams.skuCode" placeholder="sku编码" style="width: 240px" @keyup.enter.native="search()" />
                </el-form-item>
                <el-form-item label="备注">
                    <el-input size="small" v-model="queryParams.partnerremark" placeholder="备注" style="width: 240px" @keyup.enter.native="search()" />
                </el-form-item>
                <el-form-item label="物流单号">
                    <el-input size="small" v-model="queryParams.trackingnumber" placeholder="物流单号" style="width: 240px" @keyup.enter.native="search()" />
                </el-form-item>
                <el-form-item label="单号">
                    <el-input size="small" v-model="queryParams.tradeno" placeholder="单号" style="width: 240px" @keyup.enter.native="search()" />
                </el-form-item>
                <el-form-item>
                    <el-button v-on:click="search()" type="primary" size="small">搜索</el-button>
                    <el-button v-on:click="reset()" size="small">重置</el-button>
                </el-form-item>
            </el-form>
            <el-row :style="{ marginBottom: '10px' }">
                
                <el-button size="small" style="float: right;" @click="exportData" type="success">导出Excel</el-button>
                <el-button size="small" :type="queryParams.state == '' ? 'success' : 'default'" @click="queryParams.state = ''; getList();">全部订单</el-button>
                <el-button size="small" :type="queryParams.state == '0' ? 'primary' : 'default'" @click="queryParams.state = '0'; getList();">待审核 <el-badge :value="dataTips.status0" class="item"></el-badge>
                </el-button>
                <el-button size="small" :type="queryParams.state == '1' ? 'success' : 'default'" @click="queryParams.state = '1'; getList();">待发货 <el-badge :value="dataTips.status1" class="item"></el-badge>
                </el-button>
                <el-button size="small" :type="queryParams.state == '2' ? 'success' : 'default'" @click="queryParams.state = '2'; getList();">
                    已发货<el-badge :value="dataTips.status2" class="item"></el-badge>
                </el-button>
                <el-button size="small" :type="queryParams.state == '3' ? 'success' : 'default'" @click="queryParams.state = '3'; getList();">
                    已完成<el-badge :value="dataTips.status1" class="item"></el-badge>
                </el-button>
                <el-button size="small" :type="queryParams.state == '4' ? 'danger' : 'default'" @click="queryParams.state = '4'; getList();">
                    作废<el-badge :value="dataTips.status4" class="item"></el-badge>
                </el-button>
                <el-divider direction="vertical"></el-divider>
                <font color="#f00">{{ $t("订单类型") }}：</font>
                <el-button size="small" :type="queryParams.type == '' ? 'success' : 'default'" @click="queryParams.type = ''; getList();">全部订单</el-button>
                <el-button type="success" size="small" :type="queryParams.type == '1' ? 'danger' : 'default'" @click="queryParams.type = '1'; getList();">样品单</el-button>
                <el-button type="primary" size="small" :type="queryParams.type == '0' ? 'danger' : 'default'" @click="queryParams.type = '0'; getList();">销售单</el-button>
            </el-row>
            <el-row :style="{ marginBottom: '10px' }">
                <div>
                    <Page :page-size="page.pageSize" show-total :total="page.total" :current="page.current" @on-change="changePage"></Page>
                </div>
            </el-row>
            <div style="min-height: 300px" v-loading="loading">
                <template v-if="disTrades.length > 0">
                    <section id="mileBind" v-for="(order, orderIndex) in disTrades" :key="orderIndex">
                        <el-card shadow="hover" style="margin-bottom: 10px;">
                            <div slot="header" class="clearfix">
                                <div style="border-bottom: 1px dotted #cecece;padding-bottom: 5px">
                                    <el-tag size="small" type="danger">{{order.toPartner}}</el-tag>
                                    <el-tag v-if="order.sysstatus==0" size="small" type="primary">待审核</el-tag>
                                    <el-tag v-if="order.sysstatus==2" size="small" type="success">已发货</el-tag>
                                    <el-tag v-if="order.sysstatus==1" size="small" type="primary">待发货</el-tag>
                                    <el-tag v-if="order.sysstatus==-1" size="small" type="primary">已驳回</el-tag>
                                    <el-tag v-if="order.type==1" size="small" type="danger">样品单</el-tag>
                                    <el-button v-else size="mini" type="danger" @click="setOrderType(order)">设为样品</el-button>
                                    <el-button type="danger" v-if="order.sysstatus==0" size="mini" @click="toReview(order)">去审核</el-button>
                                    <el-button type="success" v-if="order.sysstatus==2" size="mini">设为完成</el-button>
                                    <!--  <el-button size="mini" type="success" v-if="order.waybillId>0">
                                        查看发货单
                                    </el-button>
                                    <el-button style="float: right;" v-if="order.sysstatus!=-1 && !order.waybillId" type="success" @click="pushOrder(order)" size="mini">生成出货单</el-button> -->
                                </div>
                                <div class="orderLine">
                                    <span>交易单号：{{order.tradeno}}
                                    </span>
                                    <label>运单号:</label>
                                    <span @click="copy(order.trackingnumber)" class="btnCopy" :data-clipboard-text='order.trackingnumber'>{{ order.trackingnumber
                                        }}<i size="mini" class=" el-icon-document-copy">
                                        </i></span>
                                </div>
                                <div class="orderLine">
                                    <span>
                                        创建时间:{{order.createtime | long2datetime}}
                                    </span>
                                    <span>
                                        处理时间:{{order.handletime | long2datetime}}
                                    </span>
                                </div>
                            </div>
                            <!-- body -->
                            <div class="">
                                <el-row :gutter="10">
                                    <el-col :span="12">
                                        <div class="grid-content">
                                            <div v-for="(item, ind) in order.items" :class="['orderitem', (ind == 0 ? '' : order.showmore ? 'showmore' : 'hidemore')]" :key="ind">
                                                <div class="item-images">
                                                    <el-image :src="item.productskuimg" />
                                                </div>
                                                <div class="item-product">
                                                    <div class="order-name">
                                                        <a href="javascript:void(0)" target="_blank">{{ item.productname
                                                            }}</a>
                                                    </div>
                                                    <div class="order-attr">规格：{{ item.productskucode }}
                                                    </div>
                                                    <div class="order-attr">
                                                        货号：<span :data-clipboard-text="item.productskupartnum" class="btnCopy" @dblclick="copySku()">{{ item.productskupartnum }}</span>
                                                    </div>
                                                    <div class="order-attr">
                                                        <span style="color:#f00;font-size:14px">成本：{{ item.partnercostprice }}PH</span>
                                                    </div>
                                                    <div class="order-attr">
                                                        <span style="color:#f00;font-size:14px"> 售价：{{ item.partnersaleprice }}PH</span>
                                                    </div>
                                                    <div class="order-attr">
                                                        <span style="color:#f00;font-size:14px">x{{
                                                            item.quantity }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tipsClass" v-if="order.items.length > 1" @click="order.showmore = !order.showmore">
                                                <template v-if="!order.showmore">
                                                    还有{{ order.items.length - 1 }}件商品
                                                </template>
                                                <template v-else>
                                                    点击收起
                                                </template>
                                            </div>
                                        </div>
                                    </el-col>
                                    <el-col :span="4">
                                        <div class="grid-content">
                                            <div class="other">
                                                分销成本:{{order.totalpartnerproductcostmoney}}
                                            </div>
                                            <div class="other">
                                                销售金额:{{order.totalpartnerproductsalemoney}}
                                            </div>
                                            <div class="other"><span class="state-primary">
                                                    应收金额:{{(order.totalpartnerproductsalemoney*0.6)|toFixed(2)}}</span>
                                            </div>
                                            <!--  <div class="other"><span class="state-primary">
                                                    预估利润:{{order.totalpartnerprofitmoney}}
                                                </span>
                                            </div> -->
                                            <div class="other"><span class="state-success">
                                                    实际利润:{{
                                                    (order.totalpartnerproductsalemoney*0.6-order.totalpartnerproductcostmoney)|toFixed(2)
                                                    }}</span>
                                            </div>
                                        </div>
                                    </el-col>
                                    <el-col :span="4">
                                        <div class="grid-content">
                                            <div class="other">
                                                商品数量:{{order.totalproductquantity}}
                                            </div>
                                            <div class="other">
                                                商品种类:{{order.totalproductcount}}
                                            </div>
                                        </div>
                                    </el-col>
                                    <el-col :span="4">
                                        <div class="grid-content">
                                            <div class="other">
                                            </div>
                                        </div>
                                    </el-col>
                                    <el-col :span="4">
                                        <div class="grid-content">
                                            <div class="other">
                                            </div>
                                        </div>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="8">
                                        <div class="other">备注:
                                            <span @click="editRemark(order)" class="state-error">{{ order.partnerremark }}<i class="el-icon-edit"> </i></span>
                                        </div>
                                    </el-col>
                                    <el-col :span="8">
                                        <div class="other">审核备注:
                                            <span class="state-error">{{ order.sysremark }}<i class="el-icon-edit"> </i></span>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-card>
                    </section>
                </template>
                <NoData v-else /> 
            </div>
            <div style="margin: 10px;overflow: hidden">
                <div style="float: right;">
                    <Page :page-size="page.pageSize" show-total :total="page.total" :current="page.current" @on-change="changePage"></Page>
                </div>
            </div>
        </div>
        <CDisTradeDialog ref="disTradeDialog" @cancel="getList()" @ok="getList()" />
        <CDisTradeRemarkDialog ref="disTradeRemarkDialog" @ok="getList()" />
        <CDisTradeReviewDialog ref="reviewDialog"  @ok="getList()"></CDisTradeReviewDialog>
    </div>
</template>
<script>
import CDisTradeDialog from "./CDisTradeDialog.vue"
import Contants from "@/utils/constants"
import api from "@/api/api"
import { getRand } from "@/utils/random"
import { signGetParams } from '@/utils/sign'
import CDisTradeRemarkDialog from "./CDisTradeRemarkDialog.vue"
import Clipboard from 'clipboard'
import CDisTradeReviewDialog from "./CDisTradeReviewDialog.vue"
import { doShipTradeOrder, doReviewTradeOrder, doFinishTradeOrder, doTypeTradeOrder, getStatusCountTradeOrder, getTradeList, doPushTradeOrder, doRemarkTradeOrder, getPartnerList } from "@/api/TradeApi"
export default {
    name: 'DisTrade',
    components: {
        CDisTradeDialog,
        CDisTradeRemarkDialog,
        CDisTradeReviewDialog
    },
    data() {
        return {
            disPartners: [],
            loading: false,

            queryParams: {
                state: 0,
                type: null
            },
            dataTips: {
                status0: 0,
                status1: 0,
                status2: 0,
                status3: 0,
                status4: 0,
            },
            others: {

            },
            DisTrade: {

            },
            page: {
                total: 0,
                current: 1,
                pageSize: 10
            },
            disTrades: [

            ],
            rules: {}
        };
    },
    mounted: function() {
        this.getList();
        this.getPartners();
        this.getOrderStatus();
    },
    methods: {

        exportData: function() {
            // if (!this.queryParams.btime || !this.queryParams.etime) {
            //     this.errorMessage("请先选择时间，再导出！");
            //     return;
            // }
            var url = (process.env.NODE_ENV == 'production' ? api.root : api.testRoot) + "/distrade/exportExcel.action?";
            let params = this.queryParams;
            params.nonceStr = getRand();
            let dt = signGetParams(params);
            url += dt;
            params.nonceStr = "";
            window.open(url.substring(0, url.length));

        },
        getOrderStatus() {
            var me = this;
            getStatusCountTradeOrder({}).then(response => {
                if (response.status == 0) {
                    me.dataTips = response.obj;
                } else {

                }
            });
        },
        toReview(order){
            this.$refs['reviewDialog'].showDialog(order.id);
        },
        setOrderType(order) {
            //
            var me = this;
            me.$confirm('是否确定设为样品单', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                me.showLoading();
                doTypeTradeOrder({ id: order.id }).then(response => {
                    if (response.status == 0) {
                        me.getList();
                    } else {
                        me.errorMessage(me.info);
                    }
                });
                me.hideLoading();

            }).catch(() => {

            });


        },
        
        editRemark(order) {
            this.$refs['disTradeRemarkDialog'].showDialog(order.id, order.partnerremark);
        },
        copySku: function() {
            var me = this;
            var clipboard = new Clipboard(".btnCopy");
            clipboard.on('success', () => {

                clipboard.destroy();
                me.successMessage('复制成功');


            })
            clipboard.on('error', e => {

                me.errorMessage('该浏览器不支持自动复制' + e)

                clipboard.destroy()
            })
        },

        cbtime: function(value) {
            if (value) {
                this.queryParams.btime = value[0];
                this.queryParams.etime = value[1];
            } else {
                this.queryParams.btime = null;
                this.queryParams.etime = null;
            }
        },
        search: function() {
            this.page.current = 1;
            this.page.total = 0;
            this.getList();
        },
        reset: function() {
            this.queryParams = {};
            this.search();
        },
        changePage(current) {
            this.page.current = current;
            this.getList();
        },
        pushOrder(row) {
            var me = this;
            me.showLoading();
            doPushTradeOrder({ id: row.id, warehouseId: 1 }).then(response => {
                me.hideLoading();
                var body = response;
                if (body.status == 0) {
                    me.getList();
                } else {
                    me.errorMessage(body.info);
                }
            });
        },
        getPartners() {
            var me = this;
            var params = {};
            params.current = 1;
            params.pageSize = 100;
          
            getPartnerList(params).then(response => {
                var body = response;
                if (body.status == 0) {

                    me.disPartners = body.obj.list;

                }
               
            }, response => {
               
            });
        },
        getList: function() {
            var me = this;
            var params = me.queryParams;
            params.current = me.page.current;
            params.pageSize = me.page.pageSize;
            me.loading = true;
            // me.showLoading();
            getTradeList(params).then(response => {
                var body = response;
                // me.hideLoading();
                if (body.status == 0) {
                    me.page.total = body.obj.totalCount;
                    me.disTrades = body.obj.list;
                    for (var i = 0; i < me.disTrades.length; i++) {
                        me.$set(me.disTrades[i], "checked", false); //更新详情
                        me.$set(me.disTrades[i], "asyncWmsLoading", false);
                        me.$set(me.disTrades[i], "loading", false);
                        me.$set(me.disTrades[i], "asyncLogLoading", false);
                        me.$set(me.disTrades[i], "asyncPdfLoading", false);
                        me.$set(me.disTrades[i], "showmore", false);
                    }

                }
                me.loading = false;
            }, response => {
                me.loading = false;
            });
        }


    }
}
</script>
<style scoped>
</style>